<script setup>
import {h, ref} from "vue";
import {PlusOutlined,DeleteOutlined,AuditOutlined,SearchOutlined} from "@ant-design/icons-vue";
// 按钮相关
const open1 = ref(false);
const open2 = ref(false);
const open3 = ref(false);
const showModal1 = () => {
  open1.value = true;
};

const handleOk1 = () => {
  open1.value = false;
};

//数据源
const dataSource = ref([{
  "request_id": "REQ001",
  "applicant": "张三",
  "application_date": "2023-10-01",
  "state": "已批准"
}, {
  "request_id": "REQ002",
  "applicant": "李四",
  "application_date": "2023-10-02",
  "state": "待审核"
}])


</script>

<template>

  <!--条-->
  <a-card class="page-container" title="备品申请" head-style="font-size:30px">
    <!--弹窗1详情-->
    <a-modal v-model:open="open1" @ok="handleOk1" style="width: 75%" >
      <template #title>
        <span style="font-size: 25px;">新增</span>
      </template>
      <a-form class="input-list">
        <a-divider/>

        <a-table>
          <a-table-column title="序号" data-index="id" align="center"/>
          <a-table-column title="编码" data-index="name" align="center"/>
          <a-table-column title="名称" data-index="model" align="center"/>
          <a-table-column title="日期" data-index="num" align="center"/>
          <a-table-column title="数量" data-index="num" align="center"/>
          <a-table-column title="操作"  align="center">
            <div style=" display: flex;justify-content: center;align-items: center;">
              <a-button type="primary" style="background: red">删除</a-button>
            </div>
          </a-table-column>
        </a-table>

        <a-divider style="height: 1px; background-color: black"  />
      </a-form>
    </a-modal>


    <template #extra>
      <div class="header">
        <div class="extra">
          <a-button type="primary"><PlusOutlined />新增</a-button>
          <a-button type="primary" danger><DeleteOutlined />删除</a-button>
          <a-button type="primary" style="background: gold"><AuditOutlined />审核</a-button>
        </div>
      </div>
    </template>
    <a-form layout="inline" class="a-form" style="height: 60px">
      <a-space direction="horizontal" >
        <a-form-item>
          <a-input placeholder="编码" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="名称" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="供应商" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="日期起始" >
          </a-input>
        </a-form-item>
        <a-form-item>——</a-form-item>
        <a-form-item>
          <a-input placeholder="日期截至" >
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)">查找匹配项</a-button>
        </a-form-item>
      </a-space>
    </a-form>
    <!-- 设备台账列表 -->
    <a-table :dataSource="dataSource"  style="width: 100%;" :row-selection="{}">

      <a-table-column title="申请单号" data-index="request_id" align="center"/>
      <a-table-column title="申请人" data-index="applicant" align="center"/>
      <a-table-column title="申请日期" data-index="application_date" align="center"/>
      <a-table-column title="状态" data-index="state" align="center"/>
      <a-table-column title="操作" width="10%" align="center">
        <template #default="{ row }">
          <div style=" display: flex;justify-content: center;align-items: center;">
            <a-button type="primary" style="background: #EA5413" @click="showModal1">详情</a-button>
          </div>
        </template>
      </a-table-column>
    </a-table>
  </a-card>


</template>


<style lang="scss" scoped>
.page-container{
  margin-top: 2%;
  width: 98%;
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .a-form{
    display: flex;
    align-items: center;

  }
  a-table{
    &-column{

    }
  }
}
.input-list{
  .input-div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%;
    .input-item{
      width: 45%;
    }
    .input-red{
      color:red;
    }
  }


}

</style>